<template>
	<div class="orderpj">
		<div class="shopcard-listBox">
			<ul class="shopcard-list-item-box">
				<li class="shopcard-list-item">
					<div>
						<router-link :to="{path:'/shopXQ/'+goodsid}">
							<img :src="'http://www.ntyouxuan.com/'+goodsitem.goods_image"/>
							<div class="shopcard-list-item-xinxi">
								<h3 v-text="goodsitem.goods_name">良万家海鲜花蛤即食罐头即食罐头海鲜花蛤即食罐头良万家良万家 良万家良万家</h3>
								<p><span v-text="goodsitem.specification">白色；10斤装</span></p>
								<div class="shopcard-item-num">
									<span>￥</span>
									<span v-text="price_detail[0]+'.'"></span>
									<span v-text="price_detail[1]"></span>
									<p class="shopDd-itemnum" v-text="'x'+goodsitem.quantity">x1</p>
								</div>
							</div>
						</router-link>
					</div>	
				</li>	
			</ul>
		</div>
		<div class="orderpj-box">
			<ul class="orderpj-dafen">
				<li @click="shoppf(3)"><span v-show="shopfen!=3"><img src="../../img-order/haoping@3x.png"/></span ><span v-show="shopfen==3"><img src="../../img-order/haoping_btn@3x.png"/></span><span>好评</span></li>
				<li @click="shoppf(2)"><span v-show="shopfen!=2"><img src="../../img-order/zhongping@3x.png"/></span><span v-show="shopfen==2"><img src="../../img-order/zhongping_btn@3x.png"/></span><span>中评</span></li>
				<li @click="shoppf(1)"><span v-show="shopfen!=1"><img src="../../img-order/chaping@3x.png"/></span><span v-show="shopfen==1"><img src="../../img-order/chaping_btn@3x.png"/></span><span>差评</span></li>
			</ul>
		</div>
		
		<div class="orderpj-content"><textarea name="" rows="3" cols="" v-model="pjcon" placeholder="请填写你要留言的信息"></textarea></div>
		<div class="refund-imglist">
			<div><span v-if="sendimg"><img src="../../img-order/photo@3x.png"/><input type="file" name="" id="" value="" accept="image/*" @change="imagetian()"/></span><span v-for="(item,index) in imglist"><img :src="item"/><span @click="deleimg(index)"><img src="../../img-order/icon_close@3x.png"/></span></span></div>
		</div>
		<div class="orderpj-shop">
			<h3>动态评价</h3>
			<ul>
				<li>
					<span>描述相符 ：</span>
					<span @click="msdafen(1)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="msfen<1"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="msdafen(2)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="msfen<2"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="msdafen(3)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="msfen<3"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="msdafen(4)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="msfen<4"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="msdafen(5)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="msfen<5"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
				</li>
				<li>
					<span>服务态度 ：</span>
					<span @click="fwdafen(1)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fwfen<1"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fwdafen(2)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fwfen<2"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fwdafen(3)">
						<img src="../../img-order/icon_shopping@3x.png"  v-if="fwfen<3"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fwdafen(4)">
						<img src="../../img-order/icon_shopping@3x.png"  v-if="fwfen<4"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fwdafen(5)">
						<img src="../../img-order/icon_shopping@3x.png"  v-if="fwfen<5"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
				</li>
				<li>
					<span>发货速度 ：</span>
					<span @click="fhdafen(1)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fhfen<1"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fhdafen(2)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fhfen<2"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fhdafen(3)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fhfen<3"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fhdafen(4)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fhfen<4"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
					<span @click="fhdafen(5)">
						<img src="../../img-order/icon_shopping@3x.png" v-if="fhfen<5"/>
						<img src="../../img-order/icon_shoppin2@3x.png" v-else/>
					</span>
				</li>
			</ul>
		</div>
		<div class="orderpj-ming">
			<span v-if="nmpj==1" @click="nmpj=0"><img src="../../img-address/icon_select @3x.png"/></span>
			<span v-else  @click="nmpj=1"><img src="../../img-address/icon_dis@3x.png"/></span>
			<span>匿名评价</span>
		</div>
		<div class="orderpj-tj" to="/myorder/orderpjxq" @click="plsend()">提交评论</div>
	</div>
</template>

<script>
	import orderpjCss from '@/css/orderpj.css'
	export default{
		name:'orderpj',
		data (){
			return{
				user:0,
				orderid:0,
				goodsid:0,
				spceid:0,
				goodsitem:'',
				price_detail:['0','00'],
				sendimg:true,
				imglist:[],
				pjcon:'',
				nmpj:0,
				msfen:5,
				fwfen:5,
				fhfen:5,
				shopfen:3,
			}
		},
		created:function(){
			this.user=localStorage.getItem("nt_user");
			this.orderid=this.$route.query.ordertoken;
			this.goodsid=this.$route.query.goodstoken;
			this.spceid=this.$route.query.spectoken;
		},
		methods:{
			plsend:function(){
				var self=this;
				console.log(self.nmpj);
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_buyer_order&act=evaluate_post",
					data:{'token':self.user,'order_id':self.orderid,'goods_id':self.goodsid,'spec_id':self.spceid,'evaluation':self.shopfen,'comment':self.pjcon,'evaluation_desc':self.msfen,'evaluation_service':self.fwfen,'evaluation_speed':self.fhfen,'anonymous':self.nmpj,'image_list':self.imglist},
					dataType:'json',
					success:function(res){
						if(res.done){
							self.$router.push({path:'/myorder/orderpjxq',query:{'orderpjxqid':res.retval.rec_id}});
						}
					}
				});
			},
			shoppf:function(num){
				this.shopfen=num;
			},
			msdafen:function(num){
				this.msfen=num;
			},
			fwdafen:function(num){
				this.fwfen=num;
			},
			fhdafen:function(num){
				this.fhfen=num;
			},
			imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
//                  console.log("成功读取....");
                    self.imglist.push(e.target.result);
                    $('input[type=file]')[0].value="";
                    if(self.imglist.length>=8){
                    	self.sendimg=false;
                    }
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);				
			},
			deleimg:function(ind){
				this.imglist.splice(ind,1);
				console.log(this.imglist.length)
				if(this.imglist.length<8){
					this.sendimg=true;
				}
			}
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_buyer_order&act=evaluate",
				data:{'token':self.user,'order_id':self.orderid,'goods_id':self.goodsid,'spec_id':self.spceid},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.goodsitem=res.retval.goods_list;
						self.price_detail=res.retval.goods_list.price_detail;
					}else{
						history.go(-1);
					}
				}
			});
		}
	}
</script>

<style>
</style>